<div class="form-group">
  <label>Dynamic Tooltip Text</label>
  <input type="text" [(ngModel)]="dynamicTooltipText" class="form-control">
</div>
<div class="form-group">
  <label>Dynamic Tooltip Popup Text</label>
  <input type="text" [(ngModel)]="dynamicTooltip" class="form-control">
</div>
<p>
  Pellentesque <a href="#" [tooltip]="dynamicTooltip">{{dynamicTooltipText}}</a>,
  sit amet venenatis urna cursus eget nunc scelerisque viverra mauris, in
  aliquam. Tincidunt lobortis feugiat vivamus at
  <a href="#" tooltipPlacement="left" tooltip="On the Left!">left</a> eget
  arcu dictum varius duis at consectetur lorem. Vitae elementum curabitur
  <a href="#" tooltipPlacement="right" tooltip="On the Right!">right</a>
  nunc sed velit dignissim sodales ut eu sem integer vitae. Turpis egestas
  <a href="#" tooltipPlacement="bottom" tooltip="On the Bottom!">bottom</a>
  pharetra convallis posuere morbi leo urna,
  <a href="#" [tooltipAnimation]="false" tooltip="I don't fade. :-(">fading</a>
  at elementum eu, facilisis sed odio morbi quis commodo odio. In cursus
  <a href="#" tooltipPopupDelay='1000' tooltip='appears with delay'>delayed</a> turpis massa tincidunt dui ut.
  nunc sed velit dignissim sodales ut eu sem integer vitae. Turpis egestas
</p>

<p>
  I can even contain HTML. <a href="#" [tooltipHtml]="htmlTooltip">Check me out!</a>
</p>

<template #toolTipTemplate let-model="model">
  <h4>Tool tip custom content defined inside a template</h4>
  <h5>With context binding: {{model.text}}</h5>
</template>

<p>
  Or use a TemplateRef. <a href="#" [tooltipHtml]="toolTipTemplate" [tooltipContext]="tooltipModel">Check me out!</a>
<p>

<p>
  I can have a custom class. <a href="#" tooltip="I can have a custom class applied to me!" tooltipClass="customClass">Check me out!</a>
</p>

<form role="form">
  <div class="form-group">
    <label>Or use custom triggers, like focus: </label>
    <input type="text" name="clickMe" value="Click me!" tooltip="See? Now click away..."  tooltipTrigger="focus" tooltipPlacement="right" class="form-control" />
  </div>

  <div class="form-group" ngClass="{'has-error' : !inputModel}">
    <label>Disable tooltips conditionally:</label>
    <input type="text" name="inputModel" [(ngModel)]="inputModel" class="form-control"
           placeholder="Hover over this for a tooltip until this is filled"
           tooltip="Enter something in this input field to disable this tooltip"
           tooltipPlacement="top"
           tooltipTrigger="mouseenter"
           [tooltipEnable]="!inputModel || inputModel.length==0" />
  </div>
</form>
